@extends('layouts.app')

@push('uploads')
    <script src="https://zys-blog.cdn.bcebos.com/assets/uppy/uppy.min.js"></script>
    <script src="https://zys-blog.cdn.bcebos.com/assets/uppy/zh_CN.min.js"></script>
    <link href="https://zys-blog.cdn.bcebos.com/assets/uppy/uppy.min.css" rel="stylesheet">
@endpush
@section('content')
    <div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
        <div id="drag-drop-area" class="flex  justify-center"></div>
    </div>
    <script>
        var uppy = Uppy.Core({autoProceed: true})
            .use(Uppy.Dashboard, {
                inline: true,
                target: '#drag-drop-area',
                note: 'Images and video only, 2–3 files, up to 1 MB',
            })
            .use(Uppy.Tus, {endpoint: 'http://180.76.180.42:1080/files/'})

        uppy.on('complete', (result) => {
            console.log('Upload complete! We’ve uploaded these files:', result.successful)
            result.successful.forEach(file => {
                console.log('file', file)
                const fileData = {
                    width: 0,
                    height: 0,
                    size: file.size,
                    file: file.uploadURL
                }
                if (file.type.indexOf('image/') === 0) {
                    const reader = new FileReader();
                    const img = new Image()
                    reader.onload = (function(aImg) {
                        return function(e) {
                            aImg.src = e.target.result;
                        };
                    })(img);
                    reader.readAsDataURL(file.data);
                    img.onload = function(res) {
                        console.log(res, img.height, img.width)
                        imgData = {
                            width: img.width,
                            height: img.height
                        }
                        postData = Object.assign(fileData, imgData)
                        fetch('/api/upload', {
                            method: "POST",
                            body: JSON.stringify(postData),
                            headers: {
                                "Content-Type": "application/json",
                                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr('content')
                            },
                            credentials: 'include'
                        }).then(res => {
                            console.log(res)
                        })
                    }
                } else {
                    fetch('/api/upload', {
                        method: "POST",
                        body: JSON.stringify(fileData),
                        headers: {
                            "Content-Type": "application/json"
                        },
                        credentials: 'include'
                    }).then(res => {
                        console.log(res)
                    })
                }
            })

        })
    </script>
@endsection

